<template>
	<u-popup :show="popShow" @open="bindValue = formValue" @close="formValue = ''" :round='10'>
		<view class="back-white p-a-l m-t-l">
			<div class="flex flex-between">
				<div @click="close">取消</div>
				<div>{{title}}</div>
				<div class="font-red" @click="comfirm">确定</div>
			</div>
			<input v-model="bindValue" :placeholder="nowInput.placeholder" class="p-a back-gray m-t-l m-b-l"
				style="border-radius: 100upx;" :adjust-position="false" @focus="inputBindFocus" :type="nowInput.type"
				@blur="inputBindBlur" v-if="type==='input'"></input>
			<div :style="{width:'100%',height:bottom +'px'}" v-if="type==='input'"></div>
			<div class="m-t">
			<u-radio-group v-model="bindValue" placement="column" v-if="type==='chose'" :size="24">
				<div style="height: 144upx;" class="flex flex-col flex-between">
					<u-radio  v-for="(item, index) in sexList" :key="index"
						:label="item.name" :name="item.value"  activeColor="#ff5678">
					</u-radio>
				</div>
			</u-radio-group>
			</div>
		</view>
	</u-popup>
</template>

<script>
	export default {
		name: "input-common",
		props: {
			popShow: {
				type: Boolean,
				default: false,
			},
			inputMap: {
				type: Object,
				default: () => {
					return {
						param: "",
						map: {
							phone: {
								type: "number",
								placeholder: "请输入联系方式",
							},
							nickName: {
								type: "text",
								placeholder: "请输入昵称",
							}
						},
					}
				}
			},
			formValue: {},
			title: {
				type: String,
				default: ""
			},
			valid: {
				type: "",
				default: null
			}
		},
		data() {
			return {
				bindValue: "",
				bottom: 0,
				sexList: [{
						name: '男',
						value: 1,
					},
					{
						name: '女',
						value: 2,
					}
				]
			};
		},
		computed: {
			nowInput() {
				if (!this.inputMap.param) {
					return {
						type: "text",
						placeholder: "请输入内容"
					}
				}
				let res = this.inputMap.map[this.inputMap.param];
				if (!res) {
					return {
						type: "text",
						placeholder: "请输入内容"
					}
				} else {
					return res
				}
			},
			type(){
				if(this.inputMap.param ==='sex'){
					return "chose";
				}else{
					return "input"
				}
			}
		},
		methods: {
			inputBindFocus(e) {
				this.bottom = e.detail.height
			},
			inputBindBlur() {
				this.bottom = 0
			},
			comfirm() {
				this.$emit("confirm", this.bindValue);
				this.close();
			},
			close() {
				this.$emit("update:popShow", false);
			}
		},
	}
</script>

<style lang="less">
	>input {
		height: 100upx;
		box-sizing: border-box;
		width: 100%;
	}
</style>